<template>
 <view class="content-navbar-box">
  <view class="content-navbar" :style="{backgroundImage: `url(${getImg('home-top-back.svg')})`}" >
    <u-navbar :placeholder="true" bgColor="rgba(0,0,0,0)" :autoBack="true">
      <view class="u-flex" slot="left" @click="handleCommunityChange">
        <view class="relative" style="top:2px">
        <u-image  :src="getImg('map-fill.svg')" width="24rpx" height="24rpx"></u-image>
        </view>
        <text class="content-navbar-title">{{ communityName1 }}</text>
        <u-icon name="arrow-down" color="#84A3C6" size="10"></u-icon>
      </view>
    </u-navbar>
    <!-- 轮播图 -->
    <view class="content-swier">
      <u-swiper indicatorMode="dot" indicatorInactiveColor="rgba(255,255,255,0.4)" 
      :indicator="true" imgMode="scaleToFill" :list="list1" :radius="9" height="100%" ></u-swiper>
    </view>
    <view class="content-navbar-box-bottom">
  </view>
  </view>
  <u-picker  :immediateChange="true" :show="showPicker" 
  :columns="pickerColumns"  keyName="name" @confirm="pickerConfirm" @cancel="pickerCancel" @close="pickerCancel" :closeOnClickOverlay="true"></u-picker>
</view>
</template>

<script>
	import {
		mapState,
	
	} from 'vuex'
export default {
  name: "Head",
  props: {
    list1: {
      type: Array,
      default: () => []
    },
	communities: {
		type: Array,
		default: () => []
	},
	currentCommunity: {
		type: Object,
		default: () => ({})
	}
  },
  data() {
    return {
		showPicker: false,
    }
  },
  computed: {
    ...mapState("community",["communityId","communityName"]),
  	pickerColumns() {
  		return [this.communities];
  	},
  	communityName1() {
      console.log("this.communityName",this.communityName)
  		return this.communityName || '切换小区';
  	}
  },
  methods: {
    handleCommunityChange() {
      uni.navigateTo({
        url: '/pages/choosecommunity/index'
      })
    },
	  pickerConfirm(e) {
		  const selectedCommunity = e.value[0];
		
		  this.$emit('change', selectedCommunity);
		  this.showPicker = false
	  },
	  pickerCancel() {
		  this.showPicker = false
	  }
  }
}
</script>

<style lang="scss" scoped>
.content-navbar-box{
    width: 100%;
    height: 100%;
    position:sticky;
    top: 0;
    z-index: 1000;
    // border-bottom: 1rpx solid #E5E5E5;
}
.content-navbar {
  width: 100%;
  padding: 0 36rpx ;
  background-size: cover;
  // background-color: #e2ebfe;
 

  
}
.content-navbar-title {
  font-size: 34rpx;
  color: #000000;
  font-weight: 600;
  margin: 0 9rpx 0 11rpx;
}
.content-swier {
  width: 100%;
  height: 230rpx;
  margin-top: 15rpx;
}
.content-navbar-box-bottom{
  height: 20rpx;
  background: rgba(0,0,0,0.0);
}
</style>
